<template>
	<div class="container">
		<div>
			<mt-header class="mint-header" title="客户信息">
				<router-link :to="{ path: '/declareDetail/' + cusPreDetail.id }" slot="left">
					<mt-button icon="back">返回</mt-button>
				</router-link>
			</mt-header>
		</div>
		<div class="info-modular">
			<mt-field label="客户姓名" readonly v-model="customerInfo.name"></mt-field>
			<mt-field label="客户性别" readonly v-model="customerInfo.genderName"></mt-field>
			<mt-field label="客户年龄" readonly v-model="customerInfo.ageRange"></mt-field>
			<mt-field label="客户电话" readonly disabled v-model="cusPreDetail.mobile"></mt-field>
			<mt-field label="意向级别" readonly v-model="customerInfo.intentionLevel"></mt-field>
		</div>
		<div class="info-modular">
			<div class="info-title">
				<div style="float: left;"><i class="fa fa-list-alt"></i>报备/到访楼盘</div>
			</div>
			<mt-field label="报备楼盘" readonly v-model="cusPreDetail.premisesName"></mt-field>
			<mt-field label="分销渠道" readonly v-model="cusPreDetail.staffCompanyName"></mt-field>
			<mt-field label="来访次数" readonly v-model="cusPreDetail.visitState"></mt-field>
			<mt-field label="首次来访" readonly v-model="cusPreDetail.visitTime"></mt-field>
			<div v-for="(item, index) in repeatVisitFollow" v-show="repeatVisitFollow.length > 0">
				<mt-field :label="item.visitedCount+'次到访'" readonly v-model="item.visitTime"></mt-field>
			</div>
			<div v-if="estateAdviser">
				<mt-field label="置业顾问" readonly v-model="customerInfo.adviserName"></mt-field>
				<mt-field label="顾问电话" readonly v-model="customerInfo.adviserPhone"></mt-field>
			</div>
		</div>
		<div class="info-modular">
			<div class="info-title">
				<div style="float: left;"><i class="fa fa-info-circle"></i>更多信息</div>
			</div>
			<mt-field label="从事行业" readonly v-model="customerInfo.industry" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="职位描述" readonly v-model="customerInfo.jobDesc" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="交通工具" readonly v-model="customerInfo.vehicle"></mt-field>
			<mt-field label="认知途径" readonly v-model="customerInfo.cognitiveChannel" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="家庭结构" readonly v-model="customerInfo.familyStructure" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="穿着打扮" readonly v-model="customerInfo.dressUp" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="一同来访" readonly v-model="customerInfo.visitTogether"></mt-field>
			<mt-field label="工作来往城市及区域" readonly v-model="customerInfo.workCity" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="性格特点" readonly v-model="customerInfo.nature" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="置业经历" readonly v-model="customerInfo.houseExperien" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="现有何处房产" readonly v-model="customerInfo.houseAddress" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="购房预算" readonly v-model="customerInfo.budget" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="付款方式" readonly v-model="customerInfo.payMethod"></mt-field>
			<mt-field label="为何采取此方式付款" readonly v-model="customerInfo.payWhy" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="资金实力" readonly v-model="customerInfo.deepPocket" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="决策人" readonly v-model="customerInfo.policymaker" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="本地/外地" readonly v-model="customerInfo.isLocal" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="做过哪些类型投资" readonly v-model="customerInfo.investment" :attr="{ maxlength: 100 }"></mt-field>
			<mt-field label="对投资类产品是否了解" readonly v-model="customerInfo.didKnowInvestment" :attr="{ maxlength: 30 }"></mt-field>
			<mt-field label="对本案兴趣点" rows="5" readonly v-model="customerInfo.focus" type="textarea"></mt-field>
			<mt-field label="对本案产品建议" rows="3" readonly v-model="customerInfo.suggest" type="textarea" :attr="{ maxlength: 100 }"></mt-field>
			<mt-field label="对比项目" rows="3" readonly v-model="customerInfo.compare" type="textarea" :attr="{ maxlength: 100 }"></mt-field>
			<mt-field label="对比项目为何没买" rows="3" readonly v-model="customerInfo.notBuy" type="textarea" :attr="{ maxlength: 100 }"></mt-field>
			<mt-field label="上门接待过程" rows="6" readonly v-model="customerInfo.reception" type="textarea" :attr="{ maxlength: 200 }"></mt-field>
		</div>
	</div>
</template>
<script>
	import { Toast, MessageBox, Header, Field, Checklist, Popup ,Search, DatetimePicker, CellSwipe, Picker } from 'mint-ui'
	export default {
		components:{
			Toast,MessageBox,Field,Checklist,
			Popup,Search,DatetimePicker,CellSwipe,Picker
		},
		filters: {
		},
		data () {
		    return {
				cusPreId: this.$route.params.id,
				premisesId: this.$route.params.premisesId,
		    	cusPreDetail: {},
				estateAdviser: {},
				repeatVisitFollow: [],
				params: {},
				customerInfo: {}
		    }
		},
		watch: {
		},
		computed: {
		},
		mounted: function() {
			var _self = this;
			_self.findCusPreDetail();
			$("#goble_menu_div").show();
		},
		methods :{
			findCusPreDetail(){
				var _self = this;
				var params = {};
				params.id = _self.cusPreId;
				var body = {};
				body.params = params;
				var url = _self.utilHelper.apiUrl + "/api/getCPDetail";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					var result = data.result;
					var errorMsg = data.resultMsg;
					var premisesId = window.localStorage.getItem("2_premisesId");
					if("1" == result){
						_self.cusPreDetail = data.cpDto || {};
						_self.estateAdviser = data.estateAdviser || {};
						_self.customerInfo = data.customerInfo || {};
						_self.customerInfo.cpId = _self.cusPreDetail.id;
						_self.customerInfo.name = _self.cusPreDetail.name;
						_self.customerInfo.genderName = _self.cusPreDetail.genderName;
						_self.customerInfo.adviserUuid = _self.estateAdviser.adviserUuid;
						_self.customerInfo.adviserName = _self.estateAdviser.name;
						_self.customerInfo.adviserPhone = _self.estateAdviser.phone;
						_self.repeatVisitFollow = data.repeatVisitFollow || [];
					}else{
						var instance = Toast(errorMsg);
						setTimeout(() => {
						  	instance.close();
						  	_self.$router.replace({
								path: '/index'
							})
						}, 3000);
					}
				});
			}
		}
	}
</script>
<style scoped>
	.home_image {
		position: fixed;
		bottom: 75px;
		right: 15px;
		z-index: 300;
		box-shadow: 0px 0px 5px 2px #888888;
		border-radius: 50px;
	}
	.home_image .home_icon {
      display: block;
      width: 60px;
      height: 60px;
	  background-color: #FFF;
	  color: #eb6100;
	  border-radius: 50px;
      text-align: center;
      padding-top: 15px;
	}
	.other-list{margin-top: 10px;height: 36px;}
	.other-list li{color: #fff;padding-left:18px;position: relative;float: left; width: 110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	.other-list .fa{position: absolute;left: 0;top: 1px;color: #fff;font-size: 16px;}

	.info-modular{background-color: #fff;border-bottom: 1px solid #cdcdcd;}
	.info-title{height: 32px;line-height: 32px;background-color: #f0f0f0;padding: 0 10px 0 35px;position: relative;color: #333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
	.info-title .fa{position: absolute;left: 10px;top: 7px;color: #eb6100;font-size: 17px;}

	.channel-list{padding: 10px;}
	.channel-list li{margin-bottom: 10px;}
	.life-cycle{padding:0 10px;}
	.life-cycle li{padding: 12px 0 0 120px;border-left: 1px solid #eb6100;position: relative;text-align: center;}
	.life-cycle-left{width:120px;padding-left: 14px;position: absolute;left: 0;top: 12px;}
	.life-cycle-left .circle-o{position: absolute;left: -6px;top: 20px;color: #eb6100;width: 11px;height: 11px;border:2px solid #eb6100;background-color: #fff;border-radius: 6px;}
	.life-cycle-left .time{width: 106px;display: inline-block;}
	.life-cycle-left .opeBtn{width: 105px;height: 24px;border: 1px solid #22b7a5;line-height: 22px;border-radius: 60px;display: block;margin: 10px auto 0;color: #22b7a5;}
	.life-cycle-left .opeA{border: 1px solid #3e87ea;color: #3e87ea;}
	.life-cycle-right{border-bottom: 1px solid #cdcdcd;min-height: 82px;padding-bottom: 12px;}
	.life-cycle-right .cycle-title{min-height: 46px;text-align: left;}
	.life-cycle-right .identification{position: relative;padding-left: 24px;display: inline-block;color: #eb6100;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width: 100%;}
	.identification .fa{position: absolute;left:1px;top: 3px;}
	.life-cycle li:last-child .life-cycle-right{border-bottom: none;}


	/*底部按钮*/
	.footer{position: fixed;left: 0;right: 0;bottom: 0;z-index: 2;}
	.footer-content .operationBtn{float: left;width: 50%;height: 40px;line-height: 40px;text-align: center;}
	.footer-content .btnOne{background-color: #fff;border-top: 1px solid #cdcdcd;color: #333;}
	.footer-content .btnTwo{background-color: #eb6100;color: #fff;}

	.footer-content:after,.personal-info:after,.other-list:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}

	/*弹出层*/
	.popup-page,.popup-mask{position: fixed;z-index: 99;left: 0;right: 0;top: 0;bottom: 0;}
	.popup-mask{background-color: #000;opacity: 0.3;}
	.popup-container{width: 260px;position: relative;background-color: #fff;top: 160px;left: 50%;margin-left: -130px;z-index: 100;border-radius: 6px;}
	.popup-header{padding: 12px 20px;border-bottom: 1px solid #cdcdcd;}
	.popup-body{padding: 16px 20px 10px;}
	.invalid-list li{position: relative;padding-left: 24px;line-height: 20px;width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 10px;}
	.invalid-list li:last-child{margin-bottom: 0;}
	.invalid-list .reason{border: 1px solid #cdcdcd;width: 100%;margin-top: 4px;display: none;}
	.invalid-list .active .reason{display: block;}
	.popup-footer{width: 100%;border-top: 1px solid #cdcdcd;}
	.popup-footer .btn{width: 50%;text-align: center;float: left;padding: 12px 0;font-size: 16px;color: #999;}
	.popup-footer .checkBtn{color: #eb6100;}
	.popup-footer .btn:first-child{border-right: 1px solid #cdcdcd;}
	.popup-footer:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0}

	/*弹出层*/
	.popup-page,.popup-mask{position: fixed;z-index: 99;left: 0;right: 0;top: 0;bottom: 0;}
	.popup-mask{background-color: #000;opacity: 0.3;}
	.popup-container{width: 260px;position: relative;background-color: #fff;top: 160px;left: 50%;margin-left: -130px;z-index: 100;border-radius: 6px;}
	.popup-header{padding: 12px 20px;border-bottom: 1px solid #cdcdcd;}
	.popup-body{padding: 16px 20px 10px;}
	.popup-footer{width: 100%;border-top: 1px solid #cdcdcd;}
	.popup-footer .btn{width: 50%;text-align: center;float: left;padding: 12px 0;font-size: 16px;color: #999;}
	.popup-footer .checkBtn{color: #eb6100;}
	.popup-footer .btn:first-child{border-right: 1px solid #cdcdcd;}
	.popup-footer:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0}

	.complete-information{text-align: center;}
	.information-number{position: relative;line-height: 34px;padding-left: 8px;margin-top: 8px;}
	.information-number .existingNumer,.information-number .number-list{float: left;}
	.existingNumer{display: inline-block;}
	.number-list{display: inline-block;border-radius: 4px;border:1px solid #cdcdcd;height: 34px;line-height: 32px;margin: 0 6px;}
	.number-list .number-list-item{width: 30px;height: 100%;display: inline-block;border-right: 1px solid #cdcdcd;float: left;}
	.number-list .number-list-item:last-child{border-right: none;}
	.number-input-box{position: absolute;height: 34px;left: 40px;width: 135px;opacity: 0;}

	.footer-content:after,.information-number:after{content:''; display:block; clear:both; visibility: hidden; overflow: hidden; font-size:0; height:0;}

	.progress-bar-warp{padding:8px 10px;background-color: #fff;}
	.progress-bar{padding:0 10px;background-color: #f8f8f8;}
	.progress-bar .bar-list-line{position: relative;width: 16%;float: left;border-top: 1px solid #dcdcdc;margin-top: 20px;text-align: center;height: 46px; padding-top: 14px; height: 54px;}
	.progress-bar .bar-list-line.active{color: #ff8e3b;border-top: 1px solid #ff8e3b;}
	.bar-list-line .spot{position: absolute;width: 12px;height: 12px;top: -6px;left: 50%;margin-left: -6px;background:url(../../assets/images/spot.png) no-repeat;background-size: 12px auto; background-position: 0 0;}
	.bar-list-line.active .spot{background-position: 0 -12px;}
	.bar-list-line.bar_fail .spot{background-position: 0 -24px;}
	.progress-bar .bar-list-line.bar_fail{color: rgba(255, 0, 0, 1);;border-top: 1px solid rgba(255, 0, 0, 1);;}
	.progress-bar-down li{border-bottom: 1px solid #dcdcdc;padding: 0 30px 0 10px;background-color: #fff;position: relative;}
	.progress-bar-down li .fa{position: absolute;right: 10px;top: 12px;}
	.progress-bar-down li .fa-chevron-down,.progress-bar-down li.active .fa-chevron-up{display: block;}
	.progress-bar-down li .fa-chevron-up,.progress-bar-down li.active .fa-chevron-down{display: none;}
	.progress-bar-down .progress-deteil-wrap{height: 36px;overflow: hidden;}
	.progress-bar-down li.active .progress-deteil-wrap{height: auto;}
	.progress-bar-down .progress-deteil{line-height: 30px;padding-top: 6px;min-height: 36px;}
	.progress-deteil>span{margin-right: 4px;}
	.progress-deteil>span:last-child{margin-right: 0;}
	.font-color{color:#ccc;}
	.clearfix{  *zoom:1;  }
	.clearfix:after{  content: "";  display: block;  clear: both;  }
	.operation-btn{width:50%;text-align: center;height: 40px; }

	.other-list-dial {
		height: 25px;
		background: #fff;
		border-radius: 50px;
		position: relative;
		top: -2px;
	}
	.other-list-dial .phone-dial {
		position: relative;
		top: 2px;
		color: rgba(255, 0, 0, 1);
		margin-left: 22px
	}
	.info-modular .agent-dial {
		width: 60px;
		height: 25px;
		background:rgba(255, 0, 0, 1);
		border-radius: 50px;
		position: relative;
		top: -2px;
		float: right
	}
	.copy-model{
		margin-top: 3px;
		width: 60px;
		height: 25px;
		line-height: 25px;
		background: #eb6100;
		border-radius: 50px;
		float: right;
		text-align: center;
	}
	.followBtn {width: 96% !important; margin-left: 2%; margin-bottom: 10px;border-top-style: none !important;}
	.mint-header{
		align-items: center;
		background-color: #f08c45;
		box-sizing: border-box;
		color: #fff;
		display: -ms-flexbox;
		display: flex;
		font-size: 14px;
		height: 40px;
		line-height: 1;
		padding: 0 10px;
		position: relative;
		text-align: center;
		white-space: nowrap;
	}
	.mint-header-title{
		color: #f0f0f0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: inherit;
		font-weight: bold;
		-ms-flex: 1;
		flex: 1;
	}
	.mint-field-core{
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border-radius: 0;
		border: 0;
		-ms-flex: 1;
		flex: 1;
		outline: 0;
		line-height: 1.6;
		font-size: inherit;
		height: 48px;
		width: 100%;
		border-bottom: 1px solid red;
	}
</style>
